import React, { Component } from 'react';
import { Input, Pagination, Spin } from 'antd';
import _ from 'lodash';
import PropTypes from 'prop-types';

import IpAliveCard from '@components/ip-alive-card';
import './index.less';

const Search = Input.Search;

class IpAliveList extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  pageChange = (current, pageSize) => {
    this.props.onIpsTableChange(current, pageSize);
  };

  render() {
    const {
      ips,
      ipsCount,
      allPortCount,
      ipsTableFilter,
      ipsTaskFilter,
      onIpsTableSearchChange,
      loading,
      timeline,
      isDetecting,
      scanType = ''
    } = this.props;
    const compare = _.get(ipsTaskFilter, 'compare', '');
    let compareDesc;
    if (timeline) {
      if (compare === 'appear') {
        compareDesc = '相对上轮新发现的目标';
      } else if (compare === 'disappear') {
        compareDesc = '相对上轮存活变为未知的目标';
      } else {
        compareDesc = '本轮探测存活';
      }
    } else {
      compareDesc = '累计探测存活';
    }

    const description = isDetecting
      ? `当前检测到存活为${ipsCount}个，正在探测中...`
      : `${timeline ||
          ''}  ${compareDesc}目标共${ipsCount}个,检测到存活目标上的存活端口共${allPortCount}个`;

    return (
      <div className="task-manage-detection-ip-alive">
        <Spin spinning={loading}>
          <section className="total-header">
            <div>{description}</div>
            <Search
              style={{ width: 400 }}
              enterButton
              placeholder="请输入IP、域名"
              onSearch={value => onIpsTableSearchChange(value)}
            />
          </section>
          <section style={{ marginTop: 10 }}>
            {ips.length
              ? ips.map(item => (
                  <IpAliveCard
                    key={item._id}
                    detail={item}
                    defaultExpand={false}
                    scanType={scanType}
                  />
                ))
              : null}
            <div style={{ marginTop: 10, display: 'flex', justifyContent: 'flex-end' }}>
              <Pagination
                current={ipsTableFilter.page}
                total={ipsCount}
                pageSize={ipsTableFilter.pageSize}
                onChange={this.pageChange}
              />
            </div>
          </section>
        </Spin>
      </div>
    );
  }
}

IpAliveList.propTypes = {
  ips: PropTypes.array,
  ipsCount: PropTypes.number,
  onIpsTableChange: PropTypes.func,
  ipsTableFilter: PropTypes.object,
  ipsTaskFilter: PropTypes.object,
  onIpsTableSearchChange: PropTypes.func,
  loading: PropTypes.bool,
  isDetecting: PropTypes.bool,
  timeline: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  scanType: PropTypes.string,
  allPortCount: PropTypes.number
};

export default IpAliveList;
